/**
 * Created by henian.xu on 2017/9/21 0021.
 *
 */

$inputHeight: 40px;
$fontSize: $body-font-size;
$inputTag: ('>input', '>select', '>textarea');

input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
    //padding: 0 .5em;
}

.#{$pf}form {
    &-item {
        > .header {
            display: block;
            font-size: $fontSize;
            line-height: $line-height;
            @include text-line(1);
        }
        > .body {
            position: relative;
            margin-bottom: ($fontSize * 1.5);

            > .explain {
                font-size: 85%;
                position: absolute;
                left: 0;
                right: 0;
                top: 100%;
            }

            > .content {
                display: table;
                width: 100%;
                > .cell {
                    display: table-cell;
                    width: 100%;

                    > .f-icon {
                        position: absolute;
                        z-index: $z-index-1;
                        top: 50%;
                        font-size: $fontSize;
                        width: 1em;
                        line-height: 1;
                        text-align: center;
                        margin-top: -($fontSize / 2);

                        &.before {
                            left: .5em;
                            right: auto;
                            ~ input, ~ select {
                                padding-left: 2em;
                            }
                            ~ .select2 {
                                padding-left: 1.5em;
                            }

                        }

                        &.after {
                            left: auto;
                            right: .5em;
                            ~ input, ~ select,
                            ~ .select2 {
                                padding-right: 2em;
                            }
                        }
                    }
                    #{$inputTag} {
                        outline: none;
                        border: 1px solid $color-border;
                        width: 100%;
                        font-size: $fontSize;
                        line-height: $line-height;
                        height: $inputHeight;
                        padding: ($inputHeight - ($fontSize * $line-height)) / 2 $padding-small;
                        border-radius: 5px;
                    }
                    > textarea {
                        max-width: 100%;
                        height: ($fontSize * $line-height * 3) + ($inputHeight - ($fontSize * $line-height)) + 2;
                    }

                    >.checkbox{
                        margin: $margin 0;
                    }

                }
                > .prepend,
                > .append {
                    display: table-cell;
                    vertical-align: middle;
                    white-space: nowrap;
                }
            }
        }

        // 必填
        &.required {
            > .header {
                &:before {
                    display: inline-block;
                    content: '*';
                    color: $color-red;
                    margin-right: .25em;
                }
            }
        }
        // 反馈
        &.feedback {
            &.success {
                color: $color-green;
                > .body {
                    > .content > .cell {
                        #{$inputTag} {
                            border-color: $color-green;
                        }
                    }
                    .prepend,
                    .append {
                        border-color: $color-green;
                    }
                }
            }
            &.error {
                color: $color-red;
                > .body {
                    > .content > .cell {
                        #{$inputTag} {
                            border-color: $color-red;
                        }
                    }
                    .prepend,
                    .append {
                        border-color: $color-red;
                    }
                }
            }
        }
    }

    &.horizontal {
        .#{$pf}form-item {
            @include clearfix;
            > .header {
                float: left;
                width: (5em);
                padding: ($inputHeight - ($fontSize * $line-height)) / 2 .5em;
            }
            > .body {
                margin-left: (5em);
            }
        }
        // label 文本宽度
        @for $i from 2 through 20 {
            &.label-width-#{$i}em {
                .#{$pf}form-item {
                    > .header {
                        width: ($i + 1 + em);
                    }
                    > .body {
                        margin-left: ($i + 1 + em);
                    }
                }
            }
        }
    }

    // label 文本对齐
    @each $key, $value in (left:left, right:right, center:center) {
        &.label-#{$key} {
            .#{$pf}form-item {
                > .header {
                    text-align: $value;
                }
            }
        }
    }

}

/*
input,
select,
textarea {
    outline: 0;
}

.form-item {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    line-height: 38px;
    border: 1px solid $color-border;
    margin-bottom: $margin*1.5;

    > label {
        text-align: left;
        padding: 0 1em;
        width: 7em;
    }
    > input {
        flex-grow: 1;
    }
    > img.captcha {
        width: 106px;
        height: 38px;
        cursor: pointer;
    }

    > .error {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        text-align: left;
        line-height: 1.5;
        color: #f00;
    }
}

.terms {
    text-align: left;
    font-size: 12px;
}

.ctrl {
    margin-top: $margin;
    > .#{$pf}btn {
        width: 100%;
        font-size: 20px;
        line-height: 40px;
        padding: 0;
    }
}
*/

